<template>
  <div class="reg">
    <h1>注册律师侠</h1>
    <h3>注册律师侠可享更多福利</h3>

    <div>
      <input type="text" placeholder="手机号码" v-model="phoneNumber" />
      <input type="text" placeholder="短信验证码" v-model="verificationCode" />
      <input type="button" @click="GetCode" value="获取验证码" />
      <input type="text" placeholder="输入新密码" v-model="password" />
    </div>
    <div>
      <input type="button" value="立即注册" @click="UserReg" />
    </div>
    <div class="bottom">
            <span>已有律师侠账号，</span>
            <router-link to="/login">立即登录</router-link>
    </div>
  </div>
</template>

<script>
import {mapActions} from 'vuex'
import qs from 'qs';
export default {
  data() {
    return {
      phoneNumber: "",
      verificationCode: "",
      password: "",
    };
  },
  methods: {
    ...mapActions("yang", ["SENDCODE", "UESRCODEREG"]),
    //发送验证码
    GetCode() {
      let formData = new FormData();
      formData.append("phoneNumber", this.phoneNumber);
      this.SENDCODE({ formData });
    },
    //用户验证码注册
    //用户验证码注册
     UserReg(){
      let param={username:this.phoneNumber,password:this.password,verificationCode:this.verificationCode}
      /* param=qs.stringify(param) */
      console.log(param);
      this.UESRCODEREG({param})
  }
  },
  
}
</script>

<style scoped lang="scss">
.reg{
  text-align: center;
  box-sizing: border-box;
  padding-top: 3rem;
  h3{
    color: #333333 ;
    margin-top: .43rem;
  }
  input{
    margin-top: .5rem;
    width: 4.5rem;
    height: .9rem;
    border: 2px solid #999999;
    border-radius: .5rem;
    text-indent: .5rem;
    &:nth-last-child(2){
        text-indent: 0;
        position: absolute;
        top: 1.5rem;
        right: 1.5rem;
        width: 1.6rem;
        border: none;
}
    }
  }
  div{
    position: relative;
    &:nth-child(4){
      input{
        text-indent: 0;
    }
    }
  }
  .bottom{
  position: absolute;
    bottom: -5rem;
    right: 2rem;
}
</style>
